body,
html {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.small {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 130px;
    margin-left: 30px;
    margin-bottom: 30px;
    border: 4px solid #2196f3;
    z-index: 9999;
    transition: all ease 0.3s;
    opacity: 0.7;
}

/* .small {
    position: fixed;
    bottom: 50px;
    width: 200px;
    height: 130px;
    border: 4px solid #2196f3;
    z-index: 9999;
    transition: all ease 0.3s;
    opacity: 0.7;
} */

/* .small1 {
    left: 40px;
}

.small2 {
    left: 320px;
}

.small3 {
    left: 600px;
}

.small4 {
    left: 880px;
}

.small5 {
    left: 1160px;
} */

.small:hover {
    transform: scale(1.2);
    opacity: 1;
}

.big {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.big1 {}

@keyframes leftin {
    0% {
        z-index: 10;
        left: -500px;
    }

    100% {
        z-index: 10;
        left: 0;
    }
}

.small1:hover+.big1 {
    animation: leftin ease-out 0.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.big2 {
    /* animation: all ease-out 0.5s; */
}

@keyframes bottomin {
    0% {
        z-index: 10;
        top: 350px;
    }

    100% {
        z-index: 10;
        top: 0;
    }
}

.small2:hover+.big2 {
    animation: bottomin ease-out 0.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.big3 {
    /* animation: all ease-in 1s; */
}

@keyframes scalein {
    0% {
        z-index: 10;
        transform: scale(0.1);
    }

    100% {
        z-index: 10;
        transform: scale(1);
    }
}

.small3:hover+.big3 {
    animation: scalein ease-in 0.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.big4 {
    /* animation: all ease-out 1s; */
}

@keyframes scaleout {
    0% {
        z-index: 10;
        transform: scale(2);
    }

    100% {
        z-index: 10;
        transform: scale(1);
    }
}

.small4:hover+.big4 {
    animation: scaleout ease-in 0.5s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.big5 {
    z-index: 8;
    /* transform: rotate(-360deg) scale(0.1); */
    /* animation: all ease-in-out 0.7s; */
}

@-webkit-keyframes rotatein {
    0% {
        width: 200px;
        height: 130px;
        left: 50%;
        top: 50%;
        margin-top: -65px;
        margin-left: -100px;
        z-index: 10;
        -webkit-transform: rotate(-360deg) scale(1);
        -moz-transform: rotate(-360deg) scale(1);
        -ms-transform: rotate(-360deg) scale(1);
        transform: rotate(-360deg) scale(1);
        /* transform: rotate(-360deg) scale(0.2); */
    }

    100% {
        z-index: 10;
        -webkit-transform: rotate(0) scale(1);
        -moz-transform: rotate(0) scale(1);
        -ms-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
}

@-moz-keyframes rotatein {
    0% {
        width: 200px;
        height: 130px;
        left: 50%;
        top: 50%;
        margin-top: -65px;
        margin-left: -100px;
        z-index: 10;
        -webkit-transform: rotate(-360deg) scale(1);
        -moz-transform: rotate(-360deg) scale(1);
        -ms-transform: rotate(-360deg) scale(1);
        transform: rotate(-360deg) scale(1);
        /* transform: rotate(-360deg) scale(0.2); */
    }

    100% {
        z-index: 10;
        -webkit-transform: rotate(0) scale(1);
        -moz-transform: rotate(0) scale(1);
        -ms-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
}

@-ms-keyframes rotatein {
    0% {
        width: 200px;
        height: 130px;
        left: 50%;
        top: 50%;
        margin-top: -65px;
        margin-left: -100px;
        z-index: 10;
        -webkit-transform: rotate(-360deg) scale(1);
        -moz-transform: rotate(-360deg) scale(1);
        -ms-transform: rotate(-360deg) scale(1);
        transform: rotate(-360deg) scale(1);
        /* transform: rotate(-360deg) scale(0.2); */
    }

    100% {
        z-index: 10;
        -webkit-transform: rotate(0) scale(1);
        -moz-transform: rotate(0) scale(1);
        -ms-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
}

@keyframes rotatein {
    0% {
        width: 200px;
        height: 130px;
        left: 50%;
        top: 50%;
        margin-top: -65px;
        margin-left: -100px;
        z-index: 10;
        -webkit-transform: rotate(-360deg) scale(1);
        -moz-transform: rotate(-360deg) scale(1);
        -ms-transform: rotate(-360deg) scale(1);
        transform: rotate(-360deg) scale(1);
        /* transform: rotate(-360deg) scale(0.2); */
    }

    100% {
        z-index: 10;
        -webkit-transform: rotate(0) scale(1);
        -moz-transform: rotate(0) scale(1);
        -ms-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
}

.small5:active+.big5 {
    -webkit-animation: rotatein ease-in 0.7s;
    -moz-animation: rotatein ease-in 0.7s;
    -ms-animation: rotatein ease-in 0.7s;
    animation: rotatein ease-in 0.7s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}